<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close guanbi" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">查看【{$data.arc_name}.{$data.arc_type}】</h4>
        </div>
        <div class="modal-body ">
            <form class="modalForm form-horizontal" action="{:url('index/Prearc/setArc',['mark'=>$data.mark])}" method="post">
                <input type="hidden" name="id" value="{$data.arc_id}">
                <div class="portlet-body">
                    <div class="navbar navbar-default" role="navigation">
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li class="tags" data-id="1">
                                    <a href="#" >
                                        预览
                                    </a>
                                </li>
                                <li class="active tags" data-id="2">
                                    <a href="#">
                                        档案信息
                                    </a>
                                </li>
                                {if $data.mark == '2'}
                                    <li class="tags" data-id="3">
                                        <a href="#">
                                            图片扩展信息
                                        </a>
                                    </li>

                                {elseif  $data.mark == '3'/} 
                                    <li class="tags" data-id="4">
                                        <a href="#">
                                            视频扩展信息
                                        </a>
                                    </li>
                                {elseif  $data.mark == '4'/}
                                <li class="tags" data-id="5">
                                    <a href="#">
                                        文书档案案卷
                                    </a>
                                </li>
                                {else/}

                                {/if}
                            </ul>
                        </div>
                    </div>
                    <script src="/static/assets/jwplayer/jwplayer.js"></script>
                    <script>jwplayer.key="bAoNHra71KE/mHvb0sirT4HeWLTAkpiYa1mVsA==";</script>

                    <script type="text/javascript" src="/static/assets/pdf/jquery.media.js"></script>
                    <div class="tab-pane" id="tab1" style="min-height: 200px;display: none;">
                        

                        {if condition="($data.arc_type == 'mp4') OR ($data.arc_type == 'mp3') OR ($data.arc_type == 'flv') OR ($data.arc_type == 'mov') OR ($data.arc_type == 'f4v') OR ($data.arc_type == '3gp') OR ($data.arc_type == '3g2') OR ($data.arc_type == 'ogv') OR ($data.arc_type == 'webm') OR ($data.arc_type == 'avi')"}
                        <div id="myElement">读取中</div>
                        <script type="text/javascript">
                                var playerInstance = jwplayer("myElement");
                                playerInstance.setup({
                                    file: "{$data.filePath}",
                                    aspectratio:"16:9",
                                    width: 860,
                                    height: 360,
                                    title: '',
                                    description: ''
                                });
                        </script>
                        {elseif condition="($data.arc_type == 'pdf')"/}
                        <div class="panel-body">
                          <a class="media" href="{$data.filePath}"></a>  
                       </div>
                        <script type="text/javascript">  
                            $(function() {  
                                $('a.media').media({width:840, height:600});  
                                $('a.mediase').media({width:840, height:600});  
                            });  
                        </script> 
                        {elseif condition="($data.arc_type == 'jpg') OR ($data.arc_type == 'jpeg') OR ($data.arc_type == 'bmp') OR ($data.arc_type == 'png') "/}

                        
                        <ul id="viewer" style="padding: 0;list-style: none;display: flex;justify-content:center;align-items:center;min-height: 200px;">
                            <li><div><img src="{$data.filePath}" data-original="{$data.filePath}" alt="{$data.arc_name}.{$data.arc_type}"  style="max-width: 860px;vertical-align:middle;"></div></li>
                        </ul>
                        <link rel="stylesheet" href="/static/assets/css/viewer.min.css">
                        <script src="/static/assets/js/viewer.min.js"></script>
                        <script>
                            $('#viewer').viewer({zIndex:"999999"});
                        </script>
                        {elseif condition="$data['arc_type']=='docx' OR $data['arc_type']=='docx' OR $data['arc_type']=='doc'"}<div style="text-align:center;"><i class="fa fa-file-word-o" style="color: #5C6BC0;font-size: 150px;line-height: .75em"></i></div>
                        {elseif condition="$data['arc_type']=='xlsx' OR $data['arc_type']=='xls'"}<div style="text-align:center;"><i class="fa fa-file-excel-o" style="color: #43A047;font-size: 150px;line-height: .75em"></i></div>
                        {elseif condition="$data['arc_type']=='txt'"}<div style="text-align:center;"><i class="fa fa-file-text-o" style="color: #BDBDBD;font-size: 150px;line-height: .75em"></i></div>
                        {elseif condition="$data['arc_type']=='pptx' OR $data['arc_type']=='ppt'"}<div style="text-align:center;"><i class="fa fa-file-powerpoint-o" style="color: #FF6E40;font-size: 150px;line-height: .75em"></i></div>
                        {elseif condition="$data['arc_type']=='html' OR $data['arc_type']=='htm'"}<div style="text-align:center;"><i class="fa fa-file-code-o" style="color: #BDBDBD;font-size: 150px;line-height: .75em"></i></div>
                        {else/}<div style="text-align:center;"><i class="fa fa-file-o" style="color: #BDBDBD;font-size: 150px;line-height: .75em"></i></div>


                        {/if}
                        <!--<iframe src="https://view.officeapps.live.com/op/view.aspx?src={$data.filePath}" width='100%' height='100%' frameborder='1'></iframe>-->
                    </div>
                    <div class="tab-pane active" id="tab2" >
                        
                        <div class="form-group">
                            <label class="col-md-3 control-label">标题</label>
                            <div class="col-md-9">
                                <input type="text" name="arc_title" value="{$data.arc_title}" class="form-control" placeholder="请输入标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">档号</label>
                            <div class="col-md-9">
                                <input type="text" name="arc_reference" value="{$data.arc_reference}" class="form-control" placeholder="请输入档号">
                            </div>
                        </div>
                       <!--  <div class="form-group">
                            <label class="col-md-3 control-label">分类号</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_class_num}" name="arc_class_num" class="form-control" placeholder="请输入分类号">
                            </div>
                        </div> -->
                       <!--  <div class="form-group">
                            <label class="col-md-3 control-label">案卷号</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_file_num}" name="arc_file_num" class="form-control" placeholder="请输入案卷号">
                            </div>
                        </div> -->
                       <!--  <div class="form-group">
                            <label class="col-md-3 control-label">全宗号</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_total_num}" name="arc_total_num" class="form-control" placeholder="请输入全宗号">
                            </div>
                        </div> -->
                      <!--   <div class="form-group">
                            <label class="col-md-3 control-label">件号</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_part_num}" name="arc_part_num" class="form-control" placeholder="请输入件号">
                            </div>
                        </div> -->
                       <!--  <div class="form-group">
                            <label class="col-md-3 control-label">文号</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_num}" name="arc_num" class="form-control" placeholder="请输入文号">
                            </div>
                        </div> -->
                        <div class="form-group">
                            <label class="col-md-3 control-label">编制机构</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_establishment_organization}" name="arc_establishment_organization" class="form-control" placeholder="请输入编制机构">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">编制人员</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_establishment_person}" name="arc_establishment_person" class="form-control" placeholder="请输入编制机构">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">年度</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_year}" name="arc_year" class="form-control" placeholder="请输入年度">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">重要程度</label>
                            <div class="col-md-9">
                                <select name="arc_rank" class="form-control">

                                    <option value="1" {if condition="$data.arc_rank eq '1' "} selected=""{/if}>不重要</option>
                                    <option value="2" {if condition="$data.arc_rank eq '2' "} selected=""{/if}>一般</option>
                                    <option value="3" {if condition="$data.arc_rank eq '3' "} selected=""{/if}>重要</option>
                                </select>
                            </div>
                        </div>
                      <!--   <div class="form-group">
                            <label class="col-md-3 control-label">实体份数</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_entities_num}" name="arc_entities_num" class="form-control" placeholder="请输入实体份数">
                            </div>
                        </div> -->
                       <!--  <div class="form-group">
                            <label class="col-md-3 control-label">借阅份数</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_borrowed}" readonly name="arc_borrowed" class="form-control" placeholder="请输入借阅份数">
                            </div>
                        </div> -->
                       <!--  <div class="form-group">
                            <label class="col-md-3 control-label">页数</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_page_num}" name="arc_page_num" class="form-control" placeholder="请输入页数">
                            </div>
                        </div> -->
                        <div class="form-group">
                            <label class="col-md-3 control-label">档案盒</label>
                            <div class="col-md-9">
                                <button class="btn-small btn seBtn">选择档案盒</button>
                                <input type="text"  readonly value="{$data.box_path}"  class="form-control box_name"  placeholder="请输入档案盒">
                                <input type="hidden" name="box_id" value="{$data.box_id}" class="box_id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">存放位置</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_storage_position}" name="arc_storage_position" class="form-control" placeholder="请输入存放位置">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">备注</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.arc_remarks}" name="arc_remarks" class="form-control" placeholder="请输入备注">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">归档时间</label>
                            <div class="col-md-9">
                                <input type="date" value="{$data.arc_time}" name="arc_time" class="form-control arc_time" placeholder="请输入归档时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">保存期限</label>
                            <div class="col-md-9">
                                <select name="arc_time_limit" class="form-control">
                                    <option value="1">短期</option>
                                    <option value="2">中期</option>
                                    <option value="3">长期</option>
                                    <option value="4">永久</option>
                                    <option value="5">不保存</option>
                                </select>
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-md-3 control-label">鉴定时间</label>
                            <div class="col-md-9">
                                <input type="date" value="99" name="otags" class="form-control" placeholder="请输入鉴定时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">鉴定人</label>
                            <div class="col-md-9">
                                <input type="date" value="99" name="otags" class="form-control" placeholder="请输入鉴定人">
                            </div>
                        </div>-->
                    </div>

                    {if $data.mark != '1' }
                        <div class="tab-pane" id="tab{$data.mark+1}"  style="min-height: 250px;display: none">
                            {volist name="extend_data" id="extend"}
                            <div class="form-group">
                                <label class="col-md-3 control-label">{$extend.field_cn_name}</label>
                                <div class="col-md-9">
                                    {if $extend.field_type == 'text'}
                                    <input type="text" name="extend[{$extend.id}]" value="{$extend.value}" class="form-control" placeholder="请输入{$extend.field_cn_name}">
                                    {elseif $extend.field_type == 'time'}
                                     <input type="date" name="extend[{$extend.id}]" value="{$extend.value}" class="form-control" placeholder="请输入{$extend.field_cn_name}">
                                    {/if}
                                </div>
                            </div>
                            {/volist}
                        </div>
        
                    
                    {else/}

                    {/if}

                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn default model1close" data-dismiss="modal">关闭</button>
            <button type="button" class="btn blue save">保存</button>
        </div>
    </div>
</div>



<div class="modal fade " id="model2" tabindex="-1" role="model2" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close closeBtn" data-dismiss="model2" aria-hidden="true"></button>
                <h4 class="modal-title">选择档案盒</h4>
            </div>
            <div class="modal-body">

                <div class="selectShow" style="display: none"></div>
                <form class="modal2Form form-horizontal" action="{:url('index/Prearc/updateTags')}" method="post">
                    <div class="portlet green box">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-cogs"></i>档案盒树型菜单
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id="tree_1" class="tree-demo" >
                                {$tree}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default closeBtn" data-dismiss="modal2">关闭</button>
                <button type="button" class="btn blue saveBtn2">保存</button>
            </div>
        </div>
    </div>
</div>


<script src="/static/assets/scripts/core/jquery.media.js" type="text/javascript"></script>
                        
<script>
    $(function() {
        var did='',dname='';
        App.init();
        UITree.init();
        arc_time = '{$data.arc_time}';
        $('.arc_time').val(arc_time);
        $('.tags').click(function () {
            var id = $(this).data('id');
            if (id == 1) {
                $('#tab1').show();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('#tab5').hide();
            } else if(id == 2){
                $('#tab2').show();
                $('#tab1').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('#tab5').hide();
            }else if(id == 3){
                $('#tab3').show();
                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab4').hide();
                $('#tab5').hide();
            }else if(id == 4){
                $('#tab4').show();
                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab5').hide();
            }else if(id == 5){
                $('#tab5').show();
                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').hide();
            }

            $('.tags').removeClass('active');
            $(this).addClass('active');
            $('.tag_val').val(id);
            return false;
        });
        $('.seBtn').click(function () {
            $('#model2').modal('show');
            $("#tree_1").on('changed.jstree', function (e, data) {
                var id = data.node.data.id;

                $('.selectShow').hide(100);
                $.ajax({
                    url:'{:url("index/Storage/getStorage3")}',
                    data:{id:id},
                    type:'post',
                    dataType:'json',
                    success:function (e) {
                        if(e.code == 1){
                            var html =  '<div class="alert alert-success alert-dismissable">' +
                                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                                '<strong>档案盒名称：'+e.data.sto_name+'，厚度：'+e.data.sto_thickness+'，总页数：'+e.data.sto_available_pages+'，已存放页数：'+e.data.to_available_pages+'，可存放页数'+e.data.sy_available_pages+'</strong> '+
                                '</div>';
                            did = id;
                            dname = e.data.sto_name;
                        }else{
                            var html =  '<div class="alert alert-danger alert-dismissable">' +
                                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                                '<strong>'+e.msg+'</strong> '+
                                '</div>';
                            did = '';
                            dname = '';
                        }
                        $('.selectShow').html(html);
                        $('.selectShow').show(100);
                    }
                });

                return false;
            });
            return false;
        });
        $('.saveBtn2').click(function () {
            if(did == ''){
                var html =  '<div class="alert alert-danger alert-dismissable">' +
                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                    '<strong>请选择档案盒</strong> '+
                    '</div>';
                $('.selectShow').html(html);
                $('.selectShow').show(100);
            }else{
                $('.box_id').val(did);
                $('.box_name').val(dname);
                $('#model2').modal('hide');
            }
        });
        $('.closeBtn').click(function () {
            $('#model2').modal('hide');
        });
        dt().modalSave();
    });
</script>
<!-- 模态框关闭 关闭视频 -->
<script>
    $('.guanbi').click(function(){
            playerInstance.stop(); 
    });
    $('.model1close').click(function(){
            playerInstance.stop(); 
    });
</script>


